<template>
  <div class="container" >
    <div class="search">
      <img src="http://file.rzkeji.com/web/loveciy/img/plan/search.png"/>
      <input type="text" placeholder="搜索 中山大学" />
    </div>
    <div class="joinMe">
      <img src="http://file.rzkeji.com/web/loveciy/img/plan/people.png"/>
      <span>加入我们</span>
    </div>

    <swiper interval="2000" duration="2000" indicator-dots="true">
      <swiper-item>
          <div class="share">
          <button open-type="share">
           <img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png" class="shareBtn"/>
          </button>
          <span class="shareTitle">Sun Yat-sen University (SYSU)</span>
          <span class="shareTeam">双鸭山小分队</span>
          <span class="shareSchool">-中山大学文创团队-</span>
          <div class="sharePick">pick</div>
          <div class="shareImg">
          <img src="http://file.rzkeji.com/web/loveciy/img/plan/img.png"/>
          </div>
          </div>
      </swiper-item>
      <swiper-item>
          <div class="share">
          <button open-type="share">
           <img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png" class="shareBtn"/>
          </button>
          <span class="shareTitle">Sun Yat-sen University (SYSU)</span>
          <span class="shareTeam">双鸭山小分队</span>
          <span class="shareSchool">-中山大学文创团队-</span>
          <div class="sharePick">pick</div>
          <div class="shareImg">
          <img src="http://file.rzkeji.com/web/loveciy/img/plan/img.png"/>
          </div>
          </div>
      </swiper-item>
      <swiper-item>
          <div class="share">
          <button open-type="share">
           <img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png" class="shareBtn"/>
          </button>
          <span class="shareTitle">Sun Yat-sen University (SYSU)</span>
          <span class="shareTeam">双鸭山小分队</span>
          <span class="shareSchool">-中山大学文创团队-</span>
          <div class="sharePick">pick</div>
          <div class="shareImg">
          <img src="http://file.rzkeji.com/web/loveciy/img/plan/img.png"/>
          </div>
          </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>


export default {
  data () {
    return {
    
    }
  },

  components: {

  },

  methods: {
  
  },

  created () {

  },
  onShareAppMessage: function (res) {   //分享
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/pages/plan/main',
      success(res){
        wx.showToast({
          title:"转发成功",
          
        })
      }
    }
  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;}
.search{width: 100%;height: 60px;position: relative;}
.search input{width: 275px;height: 50px;border:1px solid gray;position: absolute;left: 24px;top: 5px;padding-left: 50px;border-radius: 10px;}
.search img{width: 36px;height: 36px;position: absolute;left:35px;top: 12px;}
.joinMe{width: 351px;height: 30px;display: flex;justify-content: flex-end;}
.joinMe img{width: 30px;height: 30px;vertical-align: middle;}
.joinMe span{width: 80px;height: 30px;text-align: center;line-height: 30px;vertical-align: middle;display: block;font-size: 16px;}
swiper,swiper-item{width: 351px;height: 489px;}
.share{width: 305px;margin-left:24px;border:1px solid gray;margin-top:5px;display: flex;flex-direction: column;border-top-left-radius:10px;border-top-right-radius:10px;padding: 0px 10px;}
.shareBtn{width: 40px;height: 40px;}
button{width: 60px;height: 40px;margin-left: 250px;background: transparent;}
button::after{border:none;}   /*初始化button的样式*/
.shareTitle{width: 100%;height: 40px;text-align: center;line-height: 40px;font-size: 14px;}
.shareTeam{width: 100%;height: 40px;text-align: center;line-height: 40px;font-size: 24px;font-weight: 700}
.shareSchool{width: 100%;height: 40px;text-align: center;line-height: 40px;font-size: 16px;}
.sharePick{width: 150px;height: 40px;border:1px solid black;margin:10px auto;border-radius: 20px;text-align: center;line-height: 40px;}
.shareImg{width: 305px;}
.shareImg img{width: 305px;}
</style>
